import React, { useEffect, useState } from 'react';

const ForumManagement: React.FC = () => {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/forum-posts')
            .then(response => response.json())
            .then(data => {
                setPosts(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('Error fetching forum posts:', error);
                setLoading(false);
            });
    }, []);

    const handleModeratePost = (postId: string) => {
        // Logic for moderating a post (e.g., approve, delete)
        console.log(`Moderating post with ID: ${postId}`);
    };

    if (loading) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>Forum Management</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>
                        <h2>{post.title}</h2>
                        <p>{post.content}</p>
                        <button onClick={() => handleModeratePost(post.id)}>Moderate</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default ForumManagement;